<!--
 * @Date: 2019-11-06 10:43:32
 * @LastEditors  : peng qiao
 * @LastEditTime : 2020-02-15 14:54:34
 -->
<template>
  <div class="streetList">
    <van-list>
      <van-cell class="return-style" @click="returnCity">
        <van-icon name="arrow-left" color="#DC4630" /><span
          class="return-text-style"
          >返回上一级</span
        >
      </van-cell>
      <van-cell
        v-for="item in streetList"
        :key="item.regionCode"
        :title="item.regionName"
        @click="streetSel(item)"
      />
    </van-list>
  </div>
</template>

<script>
export default {
  name: "StreetList",
  components: {},
  props: {
    list: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      streetList: []
    };
  },
  computed: {},
  created() {},
  mounted() {
    this.streetList = this.list;
  },
  watch: {
    list: {
      handler: function(val) {
        this.streetList = val;
      },
      deep: true
    }
  },
  methods: {
    returnCity() {
      this.$emit("returnCounty");
    },
    streetSel(data) {
      this.$emit("streetSel", data);
    }
  }
};
</script>

<style lang="scss" scoped>
.streetList {
  width: 100%;
  height: 100%;
  background: #ffffff;
  .return-style {
    display: flex;
    align-items: center;
    .return-text-style {
      margin-left: 10px;
    }
  }
}
</style>

<style lang="scss">
.streetList {
  .van-cell__value {
    display: flex;
    align-items: center;
  }
}
</style>
